<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MyPetStore Management</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">JPetStore后台管理</div>

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" >
                <a href="javascript:;" name="side"><i class="layui-icon">&#xe668;</i></a>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="/home"><i class="layui-icon" style="font-size: 20px;">&#xe68e;</i>&nbsp home</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <p th:text="${session.account?.username}"></p>
                </a>
                <dl class="layui-nav-child">
                    <dd><a name="manager">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/exit"><i class="layui-icon" style="font-size: 15px; color: #1E9FFF;">&#xe682;</i>退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon" >&#xe698;</i>  <span>商品管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/categories"><i class="layui-icon" >&#xe610;</i>  <span>大类</span></a></dd>
                        <dd><a href="/products"><i class="layui-icon" >&#xe68c;</i>  <span>小类</span></a></dd>
                        <dd><a href="/items"><i class="layui-icon" >&#xe691;</i>  <span>商品</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="/accounts"><i class="layui-icon" >&#xe66f;</i>  <span>用户管理</span></a></li>
                <li class="layui-nav-item"><a href="/orders"><i class="layui-icon" >&#xe609;</i>  <span>订单管理</span></a></li>

                <li class="layui-nav-item"><a href="/log"><i class="layui-icon" >&#xe68d;</i>  <span>日志查看</span></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-form">
            <div class="layui-input-inline" style="width: 75%; margin-left: 10px;">
                <input type="text" name="keyword" placeholder="请输入搜索内容(时间使用：年/月/日 时:分:秒的形式)" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-btn-group" style="float: right;" >
                <button class="layui-btn" type="button" name="search">搜索</button>

            </div>
        </div>

        <table id="orders" class="layui-table" lay-even lay-skin="nob" lay-filter="orders_table">
            <thead>
            <tr>
                <th lay-data="{field:'orderId', sort: true}">Order ID</th>
                <th lay-data="{field:'user'}">User</th>
                <th lay-data="{field:'date', sort: true}">Date</th>
                <th lay-data="{field:'totalPrice', sort: true}">Total Price</th>
                <th lay-data="{field:'outState'}">发货状态</th>
                <th lay-data="{field:'option'}">Option</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="order:${orders}">
                <td th:text="${order.orderId}"></td>
                <td th:text="${order.username}"></td>
                <td th:text="${#dates.format(order.orderDate, 'yyyy/MM/dd hh:mm:ss')}"></td>
                <td th:text="${#numbers.formatDecimal(order.totalPrice, 1, 2)}"></td>
                <td th:if="${order.outStatus}!= 0">
                    <a class="layui-btn layui-btn-xs layui-btn-normal">已发货</a>
                </td>
                <td th:if="${order.outStatus}== 0">
                    <a class="layui-btn layui-btn-xs layui-btn-danger">未发货</a>
                </td>
                <td th:if="${order.outStatus}!=0">
                    <a th:id="${order.orderId}" class="layui-btn layui-btn-xs" name="modify_btn">修改</a>
                    <a th:href="@{'/deleteOrder?orderId='+${order.orderId}}" class="layui-btn layui-btn-xs layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</a>
                    <a class="layui-btn layui-btn-xs layui-btn-disabled">已发货</a>
                </td>
                <td th:if="${order.outStatus}==0">
                    <a th:id="${order.orderId}" class="layui-btn layui-btn-xs" name="modify_btn">修改</a>
                    <a th:href="@{'/deleteOrder?orderId='+${order.orderId}}" class="layui-btn layui-btn-xs layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</a>
                    <a th:href="@{'/updateOut?orderId='+${order.orderId}}" class="layui-btn layui-btn-xs layui-btn-warm">发货</a>
                </td>
            </tr>
            </tbody>

        </table>

    </div>


</div>

<script type="text/html" id="order_fields">
    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">编号:</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input type="text" name="orderId" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="username" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订单时间:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="orderDate" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>付款明细</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">卡类型:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="cardType" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">卡号:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="creditCard" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">有效期:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="expiryDate" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>账单地址</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billToFirstName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billToLastName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址1:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billAddress1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址2:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billAddress2" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billCity" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">州:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billState" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮政编码:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billZip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">国家:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="billCountry" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>配送地址</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipToFirstName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipToLastName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址1:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipAddress1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址2:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipAddress2" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipCity" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">州:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipState" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮政编码:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipZip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">国家:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="shipCountry" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">快递公司:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="courier" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订单状态:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="status" autocomplete="off" class="layui-input readonly">
        </div>
    </div>

    <table class="layui-table" lay-even lay-skin="nob">
        <thead>
        <tr>
            <th>Item ID</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total Cost</th>
        </tr>
        </thead>

        <tbody></tbody>
    </table>
</script>

<script type="text/html" id="account_fields">

    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">用户名:</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>账户信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="firstName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="lastName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址1:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址2:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address2" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在城市:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="city" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在州:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="state" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮政编码:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="zip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在国家:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="country" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>个人资料信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">语言偏好:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="languagePreference">
                <option value="Chinese">Chinese</option>
                <option value="English">English</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">最喜欢的商品大类:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="favouriteCategoryId">
                <option th:each="category:${categories}" th:value="${category.categoryId}" th:text="${category.categoryId}"></option>
            </select>
        </div>
    </div>

</script>

<script src="layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form', 'layer', 'table'], function(){
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;

        table.init('orders_table', {
            height: 500 //设置高度
            ,page: true
            ,done: function () {
                $("[name='modify_btn']").on("click", function () {
                    var modify_btn = $(this);
                    layer.open({
                        type: 1,title: false,closeBtn: false,area: '500px;',shade: 0.8,id: 'demo',btn: ['确认', '取消'],btnAlign: 'c',moveType: 1
                        ,content: '<form id="form" class="layui-form" method="post">\n'+
                            '<input type="hidden" name="_method" value="put">' +
                            $("#order_fields").html() +
                            '</form>'
                        ,success: function(layero){
                            $.ajax({
                                type: "GET", async: false,
                                url: "/orders/"+modify_btn.attr('id'),
                                success: function (data) {
                                    $("#form").attr({"action": "/orders/"+modify_btn.attr('id')});
                                    console.log(data);
                                    var order = JSON.parse(data);
                                    $("#form [name='orderId']").attr({"value": order.orderId, "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='username']").attr({"value": order.username, "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='orderDate']").attr({"value": new Date(order.orderDate).toLocaleDateString().split("/").join("-"), "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='cardType']").attr({"value": order.cardType, "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='creditCard']").attr({"value": order.creditCard, "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='expiryDate']").attr({"value": order.expiryDate, "readonly": "readonly"}).css("color","#999999");
                                    $("#form [name='billToFirstName']").attr({"value": order.billToFirstName});
                                    $("#form [name='billToLastName']").attr({"value": order.billToLastName});
                                    $("#form [name='billAddress1']").attr({"value": order.billAddress1});
                                    $("#form [name='billAddress2']").attr({"value": order.billAddress2});
                                    $("#form [name='billCity']").attr({"value": order.billCity});
                                    $("#form [name='billState']").attr({"value": order.billState});
                                    $("#form [name='billZip']").attr({"value": order.billZip});
                                    $("#form [name='billCountry']").attr({"value": order.billCountry});
                                    $("#form [name='shipToFirstName']").attr({"value": order.shipToFirstName});
                                    $("#form [name='shipToLastName']").attr({"value": order.shipToLastName});
                                    $("#form [name='shipAddress1']").attr({"value": order.shipAddress1});
                                    $("#form [name='shipAddress2']").attr({"value": order.shipAddress2});
                                    $("#form [name='shipCity']").attr({"value": order.shipCity});
                                    $("#form [name='shipState']").attr({"value": order.shipState});
                                    $("#form [name='shipZip']").attr({"value": order.shipZip});
                                    $("#form [name='shipCountry']").attr({"value": order.shipCountry});
                                    $("#form [name='courier']").attr({"value": order.courier});
                                    $("#form [name='status']").attr({"value": order.status, "readonly": "readonly"}).css("color","#999999");

                                    for (const lineItem of order.lineItems) {
                                        var tr = document.createElement("tr");
                                        $("#form table tbody").append(tr);
                                        var td1 = document.createElement("td"),
                                            td2 = document.createElement("td"),
                                            td3 = document.createElement("td"),
                                            td4 = document.createElement("td"),
                                            td5 = document.createElement("td");

                                        td1.innerText = lineItem.item.itemId;
                                        if (lineItem.item.attribute1 !== undefined)
                                            td2.innerText += lineItem.item.attribute1+' ';
                                        if (lineItem.item.attribute2 !== undefined)
                                            td2.innerText += lineItem.item.attribute2+' ';
                                        if (lineItem.item.attribute3 !== undefined)
                                            td2.innerText += lineItem.item.attribute3+' ';
                                        if (lineItem.item.attribute4 !== undefined)
                                            td2.innerText += lineItem.item.attribute4+' ';
                                        if (lineItem.item.attribute5 !== undefined)
                                            td2.innerText += lineItem.item.attribute5+' ';
                                        td2.innerText += lineItem.item.product.name;
                                        td3.innerText = lineItem.quantity;
                                        td4.innerText = lineItem.unitPrice;
                                        td5.innerText = lineItem.total;

                                        tr.append(td1); tr.append(td2); tr.append(td3); tr.append(td4); tr.append(td5);
                                    }
                                    var tr = document.createElement("tr");
                                    $("#form table tbody").append(tr);
                                    var td = document.createElement("td");
                                    td.innerText = 'Total: '+order.totalPrice;
                                    td.setAttribute("colspan", "5");
                                    tr.append(td);
                                }
                            });
                            form.render();
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').on("click", function () {
                                console.log($("#form").serialize());
                                $("#form").submit();
                            });
                        }
                    });
                });
            }
        });

        //搜索
        $("button[name='search']").on("click", function () {
            var keyword = $("input[name='keyword']").val();
            console.log('keyword');
            if (keyword !== '') {
                $("[lay-id='orders'] .layui-table tbody tr").hide()
                    .filter(":contains("+$.trim(keyword.toLowerCase())+")").show()
                    .filter(":contains("+$.trim(keyword.toUpperCase())+")").show();
            }
        })
        //重置
        $("button[name='reset_search']").on("click", function () {
            $("[lay-id='orders'] .layui-table tbody tr").show();
        })

        var isShow = true;  //定义一个标志位
        $("[name='side']").on("click", function () {
            console.log("side");
            //选择出所有的span，并判断是不是hidden
            $('.layui-nav-item span').each(function(){
                if($(this).is(':hidden')){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            //判断isshow的状态
            if(isShow){
                $('.layui-side.layui-bg-black').width(60); //设置宽度
                // $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
                //将footer和body的宽度修改
                $('.layui-body').css('left', 60+'px');
                $('.layui-footer').css('left', 60+'px');
                //将二级导航栏隐藏
                $('dd span').each(function(){
                    $(this).hide();
                });
                //修改标志位
                isShow =false;
            }else{
                $('.layui-side.layui-bg-black').width(200);
                // $('.kit-side-fold i').css('margin-right', '10%');
                $('.layui-body').css('left', 200+'px');
                $('.layui-footer').css('left', 200+'px');
                $('dd span').each(function(){
                    $(this).show();
                });
                isShow =true;
            }
        });

    });
</script>

<script th:inline="javascript">
    layui.use(['element', 'form', 'layer', 'table'], function() {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var routing = [[${session.account.username}]];
        var username=[[${session.account.username}]];
        var firstname=[[${session.account.firstName}]];
        var lastName=[[${session.account.lastName}]];
        var email=[[${session.account.email}]];
        var phone=[[${session.account.phone}]];
        var address1=[[${session.account.address1}]];
        var address2=[[${session.account.address2}]];
        var city=[[${session.account.city}]];
        var state=[[${session.account.state}]];
        var zip=[[${session.account.zip}]];
        var country=[[${session.account.country}]];

        $("[name='manager']").on("click", function () {
            layer.open({
                type: 1,title: false,closeBtn: false,area: '500px;',shade: 0.8,id: 'demo',btn: ['确认', '取消'],btnAlign: 'c',moveType: 1
                ,content: '<form id="form" class="layui-form" method="post">\n' +
                    '<input type="hidden" name="_method" value="put">' +
                    $("#account_fields").html() +
                    '</form>'
                , success: function (layero) {
                    $.ajax({
                        type: "GET", async: false,
                        url:"/accounts/"+routing,
                        success: function (data) {
                            $("#form").attr({"action": "/accounts/"+ routing + "/password"});
                            console.log(data);
                            var account = JSON.parse(data);
                            $("#form [name='username']").attr({"value": username, "readonly": "readonly"}).css("color","#999999");
                            $("#form [name='firstName']").attr({"value": firstname});
                            $("#form [name='lastName']").attr({"value": lastName});
                            $("#form [name='email']").attr({"value": email});
                            $("#form [name='phone']").attr({"value": phone});
                            $("#form [name='address1']").attr({"value": address1});
                            $("#form [name='address2']").attr({"value": address2});
                            $("#form [name='city']").attr({"value": city});
                            $("#form [name='state']").attr({"value": state});
                            $("#form [name='zip']").attr({"value": zip});
                            $("#form [name='country']").attr({"value": country});
                            $("#form option[value="+account.languagePreference+"]").attr({"selected": "selected"});
                            $("#form option[value="+account.favouriteCategoryId+"]").attr({"selected": "selected"});
                        }
                    });
                    form.render();
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').on("click", function () {
                        console.log($("#form").serialize());
                        $("#form").submit();
                    });
                }
            });
        });
    });
</script>

</body>
</html>